<template lang="html">
  <div class="editor" >
    <div class="editor-box" ref="wangEditor" @click="focusText">

    </div>
<!--    //这是我自己插入的select选择框-->
   <!-- <div ref="select">
      <el-select v-model="selectOption"  class="editor-select" style="width: 200px; margin: 10px 0" @change="handleChange"  clearable placeholder="插入标识">
        <el-option v-for="item in identifications" :key="item.contractCode" :label="item.contractCodeName" :value="item.contractCode"></el-option>
      </el-select>
    </div>-->
  </div>
</template>

<script>
  import E from "wangeditor";

  export default {
    name: "editoritem",
    data() {
      return {
        editor: null,
        htmlEle: "",
        txt: null,
        identifications: [],
        imgsrc:[],
        insertStr: '',
        selectOption: ''
      };
    },
  /*  model: {
      prop: "value",
      event: "change",
    },*/
    /*父传子的html*/
    props: {
      value: {
        type: String,
        default: "",
      },
      isClear: {
        type: Boolean,
        default: false,
      },
    },
    watch: {
      isClear(val) {
        // 触发清除文本域内容
        if (val) {
          this.editor.txt.clear();
          this.htmlEle = null;
        }
      },
      value: function (value) {
        if (value !== this.editor.txt.html()) {
          this.editor.txt.html(this.value);
        }

      },
      //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
    },
    created() {
      // this.getIdentifications()
    },
    mounted() {
      this.initEditor(this.value);
    },
    methods: {
      initEditor(html) {

        // const menuKey = "alertMenuKey";
        this.editor = new E(this.$refs.wangEditor);
        this.editor.config.uploadImgShowBase64 = true; // base 64 存储图片
        // this.editor.config.uploadImgServer = "http://otp.cdinfotech.top/file/upload_images"; // 配置服务器端地址

        // 使用回调函数，对上传图片的不同阶段，做相应处理
        /*  this.editor.config.uploadImgHooks = {
            // 上传图片之前
            before: function(xhr) {
              console.log(xhr)

              // 可阻止图片上传
              // return {
              //   prevent: true,
              //   msg: '需要提示给用户的错误信息'
              // }
            },
            // 图片上传并返回了结果，图片插入已成功
            success: function(xhr) {
              console.log('success', xhr)
            },
            // 图片上传并返回了结果，但图片插入时出错了
            fail: function(xhr, editor, resData) {
              console.log('fail', resData)
            },
            // 上传图片出错，一般为 http 请求的错误
            error: function(xhr, editor, resData) {
              console.log('error', xhr, resData)
            },
            // 上传图片超时
            timeout: function(xhr) {
              console.log('timeout')
            },
            // 图片上传并返回了结果，想要自己把图片插入到编辑器中
            // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
            customInsert: function(insertImgFn, result) {
              // result 即服务端返回的接口
              console.log('customInsert', result)

              // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
              insertImgFn(result.data[0])
            }
          }*/
        // this.editor.config.uploadImgHeaders = {}; // 自定义 header
        // this.editor.config.uploadFileName = "file"; // 后端接受上传文件的参数名
        // this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
        // this.editor.uploadImgAccept  =['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'] //类型
        // this.editor.config.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
        // this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
        // this.editor.config.lineHeights = ["1", "1.15", "1.6", "2", "2.5", "3"]; // 配置行高
        // this.editor.config.pasteFilterStyle = false
        this.editor.withCredentials = true
        this.editor.showLinkImg = false
        this.editor.config.placeholder = "请输入..."
        this.editor.config.customUploadImg = function(files, insert) {
          // const form = new FormData()
          // for (let i = 0; i < files.length; i++) {
          //   form.append('file', files[i])
          // }
          // form.append('path', path)
          // Axios.post(`${base}/image/image/uploadImage`, form, {
          // }).then((res) => {
          //   const images = res.data
          //   insert(images)
          // })
        }
        this.editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
          console.log(resultFiles)
          console.log(insertVideoFn)
          // resultFiles 是 input 中选中的文件列表
          // insertVideoFn 是获取视频 url 后，插入到编辑器的方法
          // 上传视频，返回结果，将视频地址插入到编辑器中
          insertVideoFn("http://172.25.212.37:8819/center/111.mp4")
        }
        // 配置菜单
        this.editor.config.menus = [
          "head", // 标题
          "bold", // 粗体
          "fontSize", // 字号
          "fontName", // 字体
          'image',
          'video',
          "italic", // 斜体
          "underline", // 下划线
          "strikeThrough", // 删除线
          "lineHeight", //行高
          "indent", //缩进
          "foreColor", // 文字颜色
          "backColor", // 背景颜色
          "link", // 插入链接
          "list", // 列表
          "justify", // 对齐方式
          "quote", // 引用
          "table", // 表格
          "code", // 插入代码
          "hr", //分割线
          "|",
          "undo", // 撤销
          "redo", // 重复
          "fullscreen", // 全屏
        ];

        this.editor.config.onchange = (html) => {
          this.htmlEle = html; // 绑定当前逐渐地值
          this.imgsrc = this.getSrc(html) // 如果图片地址有重复可以采用去重 并delete 远程图片...
          this.$emit("change", this.htmlEle); // 将内容同步到父组件中

        };
        /*  this.editor.config.onblur = function (newHtml) {
          console.log('onblur', newHtml)
        }*/
        /* this.editor.config.onfocus = function (newHtml) {
          console.log('onfocus', newHtml)
        }*/
        // this.editor.disable()  // 好像不起作用
        // this.editor.enable()
        // this.editor.config.onchangeTimeout = 1500; //change 延时 没啥用
        // 创建富文本编辑器
        this.editor.create();
        this.editor.txt.html(html);
        // this.editor.txt.append('<p>追加的内容</p>')
      },
      focusText(e) {

      },
      // handleChange(value) {
      //   this.insertStr = value
      //   this.$nextTick(() => {
      //     this.editor.cmd.do('insertHTML', '<span>' + '{' + value + '}' + '</span > ')
      //   })
      // },
      //获取选择框下拉列表数据
      // getIdentifications() {
      //   this.$http.system.identifications().then((res) => {
      //     if (res.data && res.data.result == "success") {
      //       let { contractCodeList } = res.data;
      //       this.identifications = contractCodeList.map((item) => {
      //         let str = item.contractCode
      //         item.contractCodeName += `(${str})`;
      //         return item;
      //       });
      //     }
      //   });
      // },

      getSrc(html) {
        var imgReg = /<img.*?(?:>|\/>)/gi
        var srcReg = /src=[\\"]?([^\\"]*)[\\"]?/i
        var arr = html.match(imgReg)
        const imgs = []
        if (arr) {
          for (let i = 0; i < arr.length; i++) {
            var src = arr[i].match(srcReg)[1]
            imgs.push(src)
          }
        }
        return imgs
      },
      deleteImage(colds) {
        console.log('deleteImage', colds)
        const a = colds[3]
        const b = colds[4]
        const c = colds[5]
        const imagePath = '/' + a + '/' + b + '/' + c
        const form = new FormData()
        form.append('imagePath', imagePath)
        // 删除图片的请求
      },
      // onchange2(html) {
      //   // html 即变化之后的内容
      //   console.log("html",html)
      //   if (this.imgsrc.length !== 0) {
      //     const nowimgs = this.getSrc(html)
      //     const merge = this.imgsrc.concat(nowimgs).filter(function(v, i, arr) {
      //       return arr.indexOf(v) === arr.lastIndexOf(v)
      //     })
      //     for (const x in merge) {
      //       const colds = merge[x].split('/')
      //       this.deleteImage(colds) // 服务器删除文件
      //     }
      //     this.imgsrc = nowimgs
      //   }
      //   console.log("editor:", this.form.descriptionAndExpectresult,this.imgsrc)
      //   // console.log(this.form.editorHTML)
      // },
    },

  };
</script>

<!--//css样式-->
<style lang="scss" scoped>
  .editor {
    width: 100%;
    position: relative;
    z-index: 1000;
    /*/deep/.w-e-toolbar {*/
    /*  align-items: center;*/
    /*  width: 100%;*/
    /*  border: 1px solid #ccc !important;*/
    /*}*/
    /*/deep/.w-e-text-container {*/
    /*  width: 100%;*/
    /*  min-height: 500px !important;*/
    /*  border: 1px solid #ccc !important;*/
    /*}*/
  }
</style>
